<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>User Chat Record List</title>
    </head>
    <body>
        <div id="userrecordgrid" style="height:280px;">
        </div>
        <script>
            /*
             * Ext JS Library 2.0.2
             * Copyright(c) 2006-2008, Ext JS, LLC.
             * licensing@extjs.com
             *
             * http://extjs.com/license
             */
            //为了一般JS方法可以调用，这个变量定义要放在onReady外面．
            var userRecordDS;
            var birthDay;
            Ext.onReady(function(){
                Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';
                // fix the bug in codepress - resize
                //Ext.BoxComponent.prototype.setSize('100%', '125px');
                /************************************************************
                 * Display the result in page
                 * the column model has information about grid columns
                 * dataIndex maps the column to the specific data field in
                 * the data store (created below)
                 ************************************************************/
                var userRecordCM = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
                    id: 'id',
                    header: "Identify",
                    dataIndex: 'id',
                    width: 50,
                    hidden: true
                }, {
                    header: "发送人",
                    width: 80,
                    dataIndex: 'chat_from_name'
                }, {
                    header: "接收者",
                    width: 100,
                    dataIndex: 'chat_to_name'
                }, {
                    header: "内容",
                    width: 600,
                    dataIndex: 'content'
                }, {
                    header: "时间",
                    width: 60,
                    dataIndex: 'created_at',
					renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')
                }]);
                /************************************************************
                 * connect to backend - grid - core part
                 * create the Data Store
                 *   connect with backend and list the result in page
                 *   through JSON format
                 ************************************************************/
                userRecordDS = new Ext.data.Store({
                    // load using script tags for cross domain, if the data in on the same domain as
                    // this page, an HttpProxy would be better
                    proxy: new Ext.data.HttpProxy({
                        url: '/users/getChatRecordList?user_id=' + '<%=@user_id%>'
                    }),
                    // create reader that reads the Topic records
                    reader: new Ext.data.JsonReader({
                        root: 'root',
                        totalProperty: 'totalProperty',
                        id: 'id'
                    }, [{
                        name: 'id'
                    }, {
                        name: 'chat_from_name'
                    }, {
                        name: 'chat_to_name'
                    }, {
                        name: 'content'
                    }, {
                        name: 'created_at'
                    }])
                });
                
                
                /************************************************************
                 * define grid panel now
                 ************************************************************/
                var userRecordGridPanel = new Ext.grid.GridPanel({
                    border: false,
                    el: 'userrecordgrid',
                    ds: userRecordDS,
                    cm: userRecordCM,
                    autoWidth: true,
                    viewConfig: {
                        forceFit: true
                    },
                    loadMask: true,
                    iconCls: 'icon-grid',
                    collapsible: true,
                    animCollapse: false,
                    autoWidth: true,
                    //frame: true,
                    title: '通信记录列表'
                });
                //panel render
                userRecordGridPanel.render();
                // trigger the data store load
                userRecordDS.load();
            });
        </script>
    </body>
</html>
